<template>
	<view>
		<view class="container-notice">
			<u-sticky customNavHeight="0">
				<u-navbar leftIconColor="#fff" title="发现" placeholder :autoBack="true">
					<!-- <template slot="left">
						<view @click="hanldeReturn" class="centerY">
							<u-icon color="#303133" size="22" name="arrow-left-double"></u-icon>
							<text class="color-dark mar-left-5 font-28"> 商城</text>
						</view>
					</template> -->
					<!-- <template #center>
					<view class="pad-left-60 pad-right-60 flex-w">
						<u-tabs :itemStyle="{ height: '68rpx' }" :scrollable="false" :lineWidth="40" :duration="200"
							lineColor="#df0007" :list="tabList"></u-tabs>
					</view>
				</template> -->
				</u-navbar>
				<view class="tab-box centerXY">
					<view class="u-tabs">
						<u-tabs :current="current" @click="handelTypeTab"
							:activeStyle="{ color: '#E26CFF',fontSize: '32rpx' }" :lineWidth="0" :duration="200"
							:list="noticeTypeTab"></u-tabs>
					</view>
					<view class="shrink centerXY">
						<image @click="hanldeSearch" src="../../static/icon/search.png" mode=""></image>
					</view>
				</view>
			</u-sticky>
			<view class="pad-left-right-26">

				<notice-list v-if="listNotice.length > 0" :list="listNotice" class="mar-top-32"></notice-list>
				<u-empty marginTop="100" v-if="listNotice.length == 0" icon="../../static/image/empty.png"></u-empty>
				<u-loadmore margin-top="30" v-if="listNotice.length > 0" :status="pageStatus" color="#8C9FAE"
					iconColor="#8C9FAE" />
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		noticePageList,
		noticeType
	} from '@/config/api.js'

	export default {
		data() {
			return {
				page: 1,
				ps: 10,
				cate_id: '',
				// tab 切换
				tabList: [{
						name: '平台公告'
					},
					{
						name: '新闻发声'
					},
					{
						name: '辟谣墙'
					},
				],
				// 列表数据
				listNotice: [],
				// 获取分类
				noticeTypeTab: [],
				//  加载状态 
				pageStatus: "loadmore",
				pageData: {},
				// 每日公告
				sDate: "",
				current: 1
			}
		},
		onLoad(options) {
			if (options.type) {
				this.current = 0
			} else {
				this.current = 1
			}
			this.sDate = options.type;
			this.getNoticeType();
			this.getNoticePageList();
		},
		// 上拉加载
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getNoticePageList();
			}
		},
		methods: {
			// 返回实体商城
			hanldeReturn() {
				uni.switchTab({
					url: uni.getStorageSync('path')
				})
			},
			// 公告类型
			handelTypeTab(e) {
				this.listNotice = [];
				this.page = 1;
				if (e.id == 'day') {
					this.cate_id = '';
					this.sDate = "today";
				} else {
					this.sDate = "";
					this.cate_id = e.id;
				}
				this.getNoticePageList();
			},
			// 搜索
			hanldeSearch() {
				uni.navigateTo({
					url: '/pages/notice/search'
				})
			},
			// 获取公告列表
			getNoticePageList() {
				this.pageStatus = 'loading'
				noticePageList({
					ps: this.ps,
					page: this.page,
					cate_id: this.cate_id,
					s_date: this.sDate
				}).then(res => {

					let {
						data
					} = res;

					this.pageData = data;
					this.page = data.current_page + 1;
					this.listNotice = this.listNotice.concat(data.data)
					this.pageStatus = 'loadmore'

					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				});
			},
			// 获取分类
			getNoticeType() {
				noticeType().then(res => {
					let {
						lists
					} = res.data;

					let data = [{
						name: '每日公告',
						id: 'day'
					}, {
						name: '全部',
						id: ''
					}]

					this.noticeTypeTab = data.concat(lists);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-notice {
		min-height: 100vh;
		width: 751rpx;
		background: url('@/static/image/my-bg.png');
		background-size: 100% auto ;
		background-repeat: no-repeat;
		// background-color: #02000b;

		::v-deep .u-sticky {
			background-position: 0 0rpx;
			background-size: cover;
			background-repeat: no-repeat;
		}
		
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
		
	}

	.tab-box {
		.u-tabs{
			width: 654rpx;
		}
		
		image {
			width: 96rpx;
			height: 96rpx;
		}
	}
</style>